<template>
  <div class="feedback-content">
    <header-bar title="事件反馈">
      <template v-slot:backBtn>
        <i @click="$emit('handleChange')" class="iconarrow_back"></i>
      </template>
    </header-bar>
    <div class="feedback-text">
      <p>
        <span>反馈内容<i class="require"></i></span>
      </p>
      <cube-textarea
        v-model="feedbackOpinion"
        placeholder="请输入反馈内容"
        :maxlength="200"
      ></cube-textarea>
    </div>
    <div class="image-upload">
      <p>
        <span>反馈照片<i class="require"></i></span>
        <span>(最多上传五张)</span>
      </p>
      <cube-upload
        ref="upload"
        :auto="false"
        :max="5"
        v-model="rebackImg"
        :simultaneous-uploads="1"
      ></cube-upload>
    </div>
    <div @click="handleSubmit" class="feedback-btn">
      提交
    </div>
  </div>
</template>

<script>
import { valiData } from "@/common/js/utils";
import { handleFeedBack, judgeHandle } from "@/api/eventAPI";
import { uploadFiles } from "@/api/upload.js";

export default {
  props: {
    baseData: {
      type: Object,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      rebackImg: [],
      rebackImgsUrl: "",
      feedbackOpinion: "",
    }
  },
  computed: {
    userInfo() {
      return JSON.parse(window.localStorage.getItem('user'))
    }
  },
  methods: {
     async uploadFiles() {
      const res = await uploadFiles(this.rebackImg); // 上传文件到 OSS
      this.rebackImgsUrl = JSON.stringify([...res]);
    },
    async handleSubmit() {
      let userInfo = this.userInfo
      let eventId = this.$route.query.id
      let userLevel = this.$route.query.orgLevel;
      let userId = userLevel == 4 ? userInfo.userId : userInfo.groupId;
      let judge = await judgeHandle(eventId, userId, userLevel);
      if(judge.code !== 0) {
        this.$createToast({
          txt: '该条事件已被处理',
          type: 'error'
        }).show()
        return
      }
      let data = {
        "assigner": userLevel,
        "eventId": eventId,
        "groupId": userInfo.groupId,
        "message": this.feedbackOpinion,
        "url": this.rebackImg.join(","),
        "userId": userId,
        "userName": userInfo.userName,
        "userOrgId": userInfo.groupId,
        "userOrgName": userInfo.groupName
      }

      if (
        !valiData.call(
          this,
          {
            message: { cond: "String($$).length>0", pro: "请输入反馈内容" },
            url: { cond: "String($$).length>0", pro: "请选择反馈照片" }
          },
          data
        )
      ) {
        return false;
      }

      this.$createDialog({
        type: "confirm",
        icon: "cubeic-alert",
        title: "确认反馈？",
        confirmBtn: {
          text: "确定"
        },
        cancelBtn: {
          text: "取消"
        },
        onConfirm: async () => {
          const toast = this.$createToast({
            time: 0,
            mask: true,
            txt: "提交中...."
          });
          toast.show();

          await this.uploadFiles();
          data.url = this.rebackImgsUrl
          
          let { code } = await handleFeedBack(data);
          toast.hide();
          if (code == 0) {
            this.$createToast({
              txt: "反馈成功",
              type: "txt"
            }).show();
            setTimeout(() => {
              this.$router.back();
            }, 1000);
          } else {
            this.$createToast({
              txt: "反馈失败",
              type: "txt"
            }).show();
          }
        }
      }).show();
    }
  },
  components: {
    'header-bar': () => import('@/components/header-bar/header-bar')
  }
}
</script>

<style lang="stylus">
.feedback-content{
    .feedback-text{
      margin-top 10px;
      width: 100%;
      height: 110px;
      background:rgba(255,255,255,1);
      p{
        height: 30px;
        display: flex;
        align-items flex-end;
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(51,51,51,1);
        text-indent: 12px;
      }
      .cube-textarea-wrapper{
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(153,153,153,1);
        max-height: 80px;
        .cube-textarea{
          font-size:14px;
          font-family:PingFangSC-Regular;
          font-weight:400;
          color:rgba(153,153,153,1);
          padding-left 15px;
        }
        &::after{
          border: none;
        }
      }
    }
  }
  .require{
    position: relative
    &:before{
      position: absolute
      left: -12px;
      top: 5px;
      content: '*';
      color: #f00;
    }
  }
  .feedback-btn{
    position fixed;
    bottom: 12px;
    left 12px;
    width:calc(100% - 24px);
    height:41px;
    background:rgba(4,48,102,1);
    border-radius:4px;
    text-align center;
    line-height 41px;
    font-size:15px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(255,255,255,1);
  }
</style>